/**
 * 路由基本使用
 * 步骤：
 * 1. 安装：npm i react-router-dom
 * 2. 导入路由的三个核心组件：Router / Route / Link
 * 3. 使用Router组件包裹根组件App=>整个应用
 * 4. 使用Route组件配置路由规则
 * 5. 使用Link组件导航路由
 */

import React, { Component } from 'react'
// 导入配置路由的三个核心组件
import { BrowserRouter as Router, Route, Link, Switch, Redirect, withRouter } from 'react-router-dom'
import Login from './login'
import './index.css'
// 子组件
const Fnc = (props) => {
    console.log('父传子获取父的路由属性', props)
    return (
        <div>
            <h2>首页子组件</h2>
        </div>
    )
}
// 首页
class Home extends Component {
    componentDidMount() {
        console.log('获取传递参数', this.props.location)
    }
    render() {
        return (
            <div>
                <h2>首页</h2>
                <button onClick={() => {
                    // this.props.history.goBack()
                    this.props.history.go(-1)
                }}>编程导航</button>
                <hr />
                <Fnc {...this.props} />
                <hr />
                <NewFnx />
            </div>
        )
    }
}
// 二级路由
const AboutTwo = () => {

    return (
        <div>
            <h1>二级路由</h1>
        </div>
    )
}
// 关于我们
const About = (props) => {
    console.log(props)
    return (
        <div>
            <h1>关于我们</h1>
            <button onClick={() => {
                // this.props.history.goBack()
                props.history.push('/')
            }}>编程导航2</button>
            <p><Link to="/about/two">关于二级路由</Link></p>
            <Route path="/about/two" component={AboutTwo} />
        </div>
    )
}
// 新闻中心
class News extends Component {
    componentDidMount() {
        console.log('获取动态路由参数', this.props.match.params)
    }
    render() {

        return (
            <div>
                <h1>新闻</h1>
            </div>
        )
    }
}
// 联系我们
const Contact = () => {

    return (
        <div>
            <h1>联系我们</h1>
        </div>
    )
}
// 404组件
const NotFound = () => {
    return (
        <div>
            <h1 className="red">
                <Link to="/home">迷路了吗？带你回家！</Link>
            </h1>
        </div>
    )
}
// 封装路由守卫组件
const Auth = ({ path, component: Com }) => {
    // console.log('aUTH:', props)
    return <Route path={path} render={(props) => {
        // console.log(props)
        const token = 1
        if (token) {
            return <Com {...props} />
        } else {
            return <Redirect to="/login" />
        }

    }} />
}
const Fnx = (props) => {
    console.log('Fnx:', props)
    return (
        <div>
            <h2>这是Fnx组件</h2>
        </div>
    )
}
const NewFnx = withRouter(Fnx)
// 根组件
const App = () => {
    return (
        <Router>
            <nav className="menu">
                <Link to="/home">首页</Link>
                <Link to="/about">关于我们</Link>
                <Link to="/news/newid">新闻</Link>

                <Link to="/contact">联系我们</Link>
            </nav>
            {/* 配置路由规则--一级路由 */}
            <Switch>
                {/* 路由重定向 */}
                <Redirect exact from="/" to="/home" />
                {/* 登录 */}
                <Route path="/login" component={Login} />
                {/* 首页 */}
                {/* <Route path="/home" component={Home} /> */}
                <Auth path="/home" component={Home} />

                {/* <Route path="/home" render={(props) => {
                    // console.log(props)
                    const token = 0
                    if (token) {
                        return <Home {...props} />
                    } else {
                        return <Redirect to="/login" />
                    }

                }} /> */}

                {/* 关于我们 */}
                {/* <Route path="/about" component={About} /> */}
                <Auth path="/about" component={About} />
                <Route path="/contact" component={Contact} />
                {/* 动态路由 */}
                <Route path="/news/:id" component={News} />
                <Route component={NotFound} />
                <hr />
                <NewFnx />
            </Switch>
        </Router>
    )
}
export default App